<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/images/favicon/favicon.png">
    <title>雫るる| Music</title>
    <link rel="stylesheet" href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/layui/css/layui.css">
    <link rel="stylesheet" href="./static/css/music.css">
    <link rel="stylesheet" href="./static/css/nav.css">
    <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/vue-aplayer/vue-aplayer.js"></script>
</head>

<body>
    <div class="header">
        <div class="layui-container" id="nav_container">
            <div class="logo" >
                <img src="./static/images/lulu_logo.png" width="98px" alt="">
            </div>
            <input type="checkbox"  id="nav-toggle" class="nav-toggle">
            <label for="nav-toggle" id="mobile-icon">
                <span class="menu-icon">
                    <i class="layui-icon layui-icon-app"></i>  
              </span>
            </label>
            <div class="page_nav">
                <ul class="layui-nav">
                    <li class="layui-nav-item">
                        <a href="index.html">首页</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="personal.html">个人简介</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="music.html">音乐</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="video.html ">视频</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="photo.html ">同人图</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="meme.html">表情包</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="about.html">关于</a>
                        <div class="radius"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="app" class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                <div class="headline">
                    <h1 style="display: inline-block;">音乐</h1>
                    <h1 id="title-right" style="float: right;">Music</h1>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li v-for="item in catalog" @click="getListByCatalog(item.name)" v-bind:class="{'layui-this': item.chosen}">
                    {{item.name}}
                </li>
                <!-- <li v-for="item in catalog" class="tag_list">
                    <a class="nav__link" @click="getListByCatalog(item.name)">
                        {{item.name}}
                    </a>
                </li> -->

            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-row" style="margin-top: 0;">
                        <div class="Album">
                            <div class="Album-title">
                                <span style="font-size: 24px;">雫るる {{ currentCatalog }}</span>
                            </div>
                            <div class="hidden_sco">
                                <div class="cover_list">
                                    <ul>
                                        <li v-for="item in list" class="title_list" id="cover_title_list">{{item.title}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="song-img">
                            <img src="./static/images/lulu.png" alt="">
                        </div>
                        <div class="song-num" style="font-size: 18px;">
                            <span>歌曲列表（{{ list.length }}首）</span>
                        </div>
                        <!-- <div class="layui-col-xs6 layui-col-sm6 layui-col-md10"
                            style="border: 1px solid white; border-radius: 5px;" id="botm">
                            <div v-for="item in list" class="musicbox" id="cover_song_list">
                                <div class="song-list-num" style="width:6%;text-align: center;">
                                    <span>1.</span></div>
                                <div class="song-list-title">
                                    <span>{{item.title}}</span></div>
                                <div class="song-list-unname" style="width:25%">
                                    <span>{{item.artist}}</span></div>
                                <div class="song-list-time">
                                    <span> 00:00</span>
                                </div>
                                <button type="button" @click="playMusic(item)"
                                    class="layui-btn layui-btn-sm layui-btn-primary" style="margin-top: 0;">
                                    <i class="layui-icon-play" style="font-family: iconfont;"></i></button>
                            </div>                        
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <aplayer class="aplayer" 
            repeat="repeat-all" 
            :list="list"
            theme="#ea668e"
            :music="music" />
    </div>

    <script type="text/javascript">

        Vue.component('aplayer', VueAPlayer)
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    catalog: [],
                    currentCatalog: null,
                    list: [],
                    music: {
                        src:'//lulufans.oss-cn-shanghai.aliyuncs.com/music/music_69a653f587c088cd27733013ff364567.mp3'
                    },
                    apiPrefix: "//back.lulufans.cn:3000/api/v1",
                    api: {
                        getCatalog: {
                            url: "/catalog-list/music"
                        },
                        getList: {
                            url: "/music-list"
                        },
                    }
                }
            },
            created() {
                this.fetchData()
            },
            methods: {
                async fetchData() {
                    await this.getCatalog()
                    this.updateCurrentCatalog(this.catalog[0].name)
                    this.getListByCatalog(this.currentCatalog)
                },
                getCatalog() {
                    return axios.get(this.apiPrefix + this.api.getCatalog.url)
                    .then(response => {
                        this.catalog = response.data.data.rows
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                getListByCatalog(catalog) {
                    return axios.get(this.apiPrefix + this.api.getList.url + "?catalog=" + catalog)
                    .then(response => {
                        this.updateCurrentCatalog(catalog)
                        this.list = [];
                        response.data.data.rows.forEach(element => {
                            this.list.push({
                                src: element.url,
                                title: element.name,
                                artist: element.author,
                                pic: element.coverUrl
                            })
                        });
                        this.music = this.list[0]
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                updateCurrentCatalog(catalog) {
                    this.currentCatalog = catalog
                    this.catalog.forEach(e=>{
                        if (e.name == this.currentCatalog) {
                            e.chosen = true
                        }
                        else {
                            e.chosen = false
                        }
                    })
                }
            },
        });

    </script>
</body>

</html>